<template>
  <div>
    <!-- 搜索表单 -->
    <el-form
      ref="ruleForm"
      :inline="true"
      :model="formData"
      class="demo-form-inline"
    >
      <el-form-item label="车辆品牌">
        <el-input
          v-model="formData.brand"
          placeholder="车辆品牌"
          @clear="restForm"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="search">搜索</el-button>
        <el-button type="success" @click="addCardsBrand"
          >新增车辆品牌</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <TodoTable
      :data="tableData"
      :columns="table_config"
      :pageSize="tablePage.pageSize"
      :pageSizes="tablePage.pageSizes"
      :total="tablePage.total"
      :currentPage="tablePage.pageNumber"
      @changePage="handlePageChange"
      @handleSelect="handleSelectChange"
    >
      <template v-slot:operation="slotData">
        <el-button size="small" type="success">删除</el-button>

        <el-button
          size="small"
          @click="brandEditData(slotData.data)"
          type="primary"
          >编辑</el-button
        >
      </template>
      <template v-slot:type="slotData"> </template>
      <template v-slot:status="slotData">
        <el-tag v-if="slotData.data.status === true">启用</el-tag>
        <el-tag v-else type="success">禁用</el-tag>
      </template>
    </TodoTable>
    <!-- 新增车辆品牌对话框 -->
    <el-dialog title="添加" :visible.sync="brandAddVisible">
      <AddCardsBrand ref="addForm" />
      <template slot="footer" class="dialog-footer">
        <el-button @click="brandAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="sumbitAdd">确 定</el-button>
      </template>
    </el-dialog>
    <!-- 修改车辆品牌对话框 -->
    <el-dialog title="修改" :visible.sync="brandEditVisible">
      <AddCardsBrand ref="editForm" :model="FormEdit" />
      <template slot="footer" class="dialog-footer">
        <el-button @click="brandEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import { cardsBrandFrom } from "@/content/index"
  import AddCardsBrand from "@c/dialog/addCardsBrand.vue"
  import TodoTable from "@c/tableData/TodoComTable.vue"
  import { getBrandList, GetBrandLogo, addBrand, BrandEdit } from "@/api/brand"
  export default {
    name: "CarsBrandIndex",
    components: { TodoTable, AddCardsBrand },
    data() {
      return {
        formData: cardsBrandFrom,
        brandList: [],
        tableData: [],
        search_key: "",
        keyword: "",
        addDialogShow: false,
        brandData: {},
        tablePage: {
          // 当前页数量
          pageSize: 10,
          pageSizes: [10, 20, 30],
          // 当前页
          pageNumber: 1,
          // 总数
          total: 1,
        },
        switch_disabled: "",
        switch_flag: false,
        brandAddVisible: false,
        brandEditVisible: false,
        multipleSelection: [],
        // 表格配置
        table_config: {
          thead: [
            {
              label: "操作",
              prop: "operation",
              type: "slot",
              slotName: "operation",
            },
            { label: "LOGO", prop: "imgUrl" },
            {
              label: "车辆品牌  ",
              prop: "nameCh",
            },
            { label: "品牌型号", prop: "nameEn" },
            {
              label: "禁启用",
              prop: "status",
              type: "slot",
              slotName: "status",
            },
          ],
        },
        FormEdit: {},
      }
    },
    mounted() {
      this.getBrandList()
    },
    methods: {
      // 搜索
      search() {
        this.getBrandList()
      },
      // 清空搜索表单重置列表
      restForm() {
        this.getBrandList()
      },
      addCardsBrand() {
        this.brandAddVisible = true
      },
      handleSelectChange(val) {
        this.multipleSelection = val
      },
      handlePageChange(pageSize, pageNumber) {
        // console.log(pageSize, pageNumber)
        this.tablePage.pageSize = pageSize
        this.tablePage.pageNumber = pageNumber
        this.getBrandList()
      },
      // 编辑数据
      brandEditData(data) {
        console.log(data)
        this.brandEditVisible = true
        this.$nextTick(() => {
          this.FormEdit = { ...data }
        })
      },
      // 获取车辆品牌列表
      async getBrandList() {
        try {
          let params = {
            pageSize: this.tablePage.pageSize,
            pageNumber: this.tablePage.pageNumber,
            brand: this.formData.brand,
          }
          const data = await getBrandList(params)
          console.log(data, "list")
          this.tableData = data.data.data.data
          this.tablePage.total = data.data.data.total
        } catch (error) {
          console.log(error)
        }
      },
      // 添加车辆品牌
      sumbitAdd() {
        // try {
        //   this.ruleForm.imgUrl = this.logo_current
        //   this.$refs.ruleForm && (await this.$refs.ruleForm.validate())
        //   await addBrand(this.ruleForm)
        //   this.$MessageBox.MessageSuccess("添加成功")
        //   this.dialogVisible = false
        // } catch (error) {
        //   console.log(error)
        //   this.dialogVisible = false
        // }

        this.$refs.addForm
          .getValue()
          .then(async (data) => {
            // 调用添加接口
            await addBrand(data)
            this.$MessageBox.MessageSuccess("添加成功")
            this.brandAddVisible = false
            this.getBrandList()
          })
          .catch((error) => {
            // 处理表单验证失败
            console.log(error)
          })
      },
      // 编辑车辆品牌信息
      editSubmit() {
        this.$refs.editForm
          .getValue()
          .then(async (data) => {
            // 调用添加接口
            // console.log("请求修改参数", data)
            const res = await BrandEdit(data)
            // console.log(res)
            this.brandEditVisible = false
            this.getBrandList()
          })
          .catch((error) => {
            // 处理表单验证失败
            console.log(error)
          })
      },
    },
  }
</script>
<style lang='scss'></style>